<template>
	<page-container boxBackground="transparent" :base-tab="4" :shownav="true" navtitle="我的" :istabbox="true">
		<view class="content-root content">
			<view class="content-box">

				<view class="mine-info">
					<view class="info">
						<image :src="userInfo.avatar?userInfo.avatar:'/static/img/mine/defalut-avatar.png'"
							class="avatar"></image>
						<view class="base-info">
							<view class="auth-info">
								<view class="name">{{userInfo.representativeName}}</view>
								<navigator class="auth" url="/pages/committee/mine/certification">已认证</navigator>
							</view>
							<view class="role">
								{{userInfo.representativeDuty}}
							</view>
						</view>
					</view>
					<view class="setup" @click="goSettingClick">
						<image src="/static/img/mine/setup.png" class="setup-img"></image>
					</view>
				</view>


				<view class="content-item mine-list">
					<view class="row">
						<view class="grid" v-for="(item,index) in itemData" :key="index" @click="itemClick(item)">
							<view class="item">
								<image :src="item.icon"></image>
								<view class="title">
									{{ item.title }}
								</view>
							</view>
							<view class="arrow">&gt;</view>
						</view>
					</view>
				</view>

				<!-- 常用服务 begin -->
				<view class="serve">
					<view class="content-item  open-gift">
						<view class="header">
							<view class="title">相关链接</view>
							<!--            <view class="subtitle" @tap="openMyAdvise">更多&nbsp;&gt;</view>-->
						</view>
						<view class="row">
							<view class="grid">
								<image src="http://www.xinchengqu.gov.cn/material/pcd_file/images/icon-qw.png"></image>
								<view class="title">
									新城区区委
								</view>
							</view>
							<view class="grid" @click="btnClick('http://www.xinchengqu.gov.cn/xcqrd_60193/bmwz/')">
								<image src="http://www.xinchengqu.gov.cn/material/pcd_file/images/icon-zf.png"></image>
								<view class="title">
									新城区人大
								</view>
							</view>
							<view class="grid" @click="btnClick('http://www.xinchengqu.gov.cn/')">
								<image src="http://www.xinchengqu.gov.cn/material/pcd_file/images/icon-zf.png"></image>
								<view class="title">
									新城区政府
								</view>
							</view>
							<view class="grid" @click="btnClick('http://www.xinchengqu.gov.cn/xcqzx_60194/bmwz/')">
								<image src="http://www.xinchengqu.gov.cn/material/pcd_file/images/icon-zx.png"></image>
								<view class="title">
									新城区政协
								</view>
							</view>
							<!-- <view class="grid">
                <image src="/static/img/mine/my3.png"></image>
                <view class="title">
                  政府通讯录
                </view>
              </view> -->
							<!-- <view class="grid">
                <image src="/static/img/mine/my5.png"></image>
                <view class="title">
                  交党费
                </view>
              </view>
              <view class="grid">
                <image src="/static/img/mine/my6.png"></image>
                <view class="title">
                  铁路12306
                </view>
              </view> -->
						</view>
					</view>
				</view>
				<!-- 常用服务 end -->

				<view class="advertisement">
					<image src="/static/img/mine/my7.png" style="width: 100%;height: 300rpx;" mode="aspectFit"
						@click="btnClick('https://m.jf.10086.cn/')">
					</image>
					<image src="/static/img/mine/my8.png" style="width: 100%;height: 150rpx;" mode="aspectFit">
					</image>
				</view>
				<!--   广告位 end   -->
			</view>
		</view>
	</page-container>

</template>

<script>
	import {
		baseMixins
	} from "@/util/baseMixins";
	import {
		loginPage,
		messagePage,
		myMessagePage
	} from "@/util/publicConfig";
	import {
		setToken
	} from "@/util/means/request";
	import {
		getUserInfo
	} from "@/service/user";

	export default {
		mixins: [baseMixins],
		data() {
			return {
				userInfo: {
					representativeName: 'aaaaaa',
					representativeDuty: 'sssss'
				},

				itemData: [{
						title: '我的积分',
						icon: '/static/img/mine/integral.png',
						url: '',
						fun: 'goIntegralPage'
					}, {
						title: '我的专业',
						icon: '/static/img/mine/my1.png',
						fun: 'goMajorPage'
					},
					{
						title: '群众消息',
						icon: '/static/img/mine/my2.png',
						url: '',
						fun: 'goMessagePage'
					},
					// {
					// 	title: '退出登录',
					// 	icon: '/static/img/mine/my2.png',
					// 	fun: 'doLogOut'
					// }
				]
			}
		},
		onLoad() {},
		onShow() {
			this.initUser()
		},
		methods: {
			goSettingClick() {
				this.$jump.toJump('/pages/mine/setting')
			},
			itemClick({
				url,
				fun
			}) {
				if (url === '/pages/message/index') return
				this[fun](url)
			},
			goIntegralPage() {
				this.$jump.toJump('/pages/mine/integral')
			},
			goMajorPage() {
				this.$jump.toJump('/pages/mine/major')
			},
			goMessagePage() {
				this.$jump.toJump(myMessagePage)
			},
			doLogOut() {
				setToken('')
				this.goPage(loginPage)
			},
			initUser() {
				this.userInfo = getUserInfo() || {}
				console.log(this.userInfo, "this.userInfo========");
			},
			btnClick(url) {
				this.$jump.toJump(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-root {
		overflow: auto;
		height: 100%;
	}

	.content-box {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		// background: url('/static/img/bg.png');
		box-sizing: border-box;

		.mine-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #FFF;

			.info {
				display: flex;
				align-items: center;

				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: $border-radius-circle;
					background: #FFF;
				}

				.base-info {
					display: flex;
					flex-direction: column;
					margin-left: 30rpx;

					view {
						margin: 10rpx;
					}

					.auth-info {
						display: flex;
						flex-direction: row;
						margin: 0;

						.name {
							font-size: 34rpx;
							margin-right: 15rpx;
						}

						.auth {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 120rpx;
							margin: 10rpx 0;
							background-image: url('/static/img/mine/auth-bg.png');
							background-size: 100% 100%;
							color: #b27a2f;
							font-size: 26rpx;
						}
					}

					.role {
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}

			.setup-img {
				width: 45rpx;
				height: 40rpx;
			}
		}


		.mine-list {
			width: 100%;
			background-color: $bg-color-white;
			padding: 20rpx 40rpx;
			margin: 40rpx 0;
			border-radius: $border-radius-lg;
			box-sizing: border-box;

			.row {
				.grid {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 0;

					.item {
						display: flex;
						align-items: center;
					}

					image {
						width: 30rpx;
						height: 30rpx;
						margin-bottom: 0;
					}

					.title {
						align-items: center;
						font-size: $font-size-lg;
						margin-left: 30rpx;
					}

					.arrow {
						margin-top: -10rpx;
						font-size: $font-size-lg;
						color: #ababab;
					}
				}
			}
		}

		.serve {
			.content-item {
				padding: 20rpx;
				//background-color: red;
				background-color: $bg-color-white;
				border-radius: $border-radius-lg;
				margin-bottom: 20rpx;

				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.title {
						font-size: $font-size-lg;
						font-weight: 500;
					}

					.subtitle {
						font-size: $font-size-base;
						color: $text-color-grey;
					}
				}

				.row {
					display: flex;
					flex-wrap: wrap;

					.grid {
						width: 25%;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin: 10rpx 0;
						// padding: 20rpx;

						image {
							width: 70rpx;
							height: 70rpx;
							margin-bottom: $spacing-row-base;
						}

						.title {
							font-size: $font-size-base;
							color: $text-color-base;
							display: flex;
							align-items: baseline;
						}
					}

				}

				.content-news {

					//background-color: red;
					.news-list {
						margin: 30rpx 0;
						padding-bottom: 30rpx;
						border-bottom: #C7C7C7 1rpx solid;
						display: flex;

						.news-img {
							image {
								width: 243rpx;
								height: 151rpx;
								border-radius: $border-radius-lg;
							}
						}

						.news-content {
							margin-left: 30rpx;
							width: 470rpx;

							.content-top {
								//padding: 2px 0;
								font-size: 30rpx;
								width: 420rpx;
								height: 80rpx;
								color: #222222;
								//background-color: yellow;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
							}

							.content-bottom {
								margin-top: 40rpx;
								font-size: 26rpx;
								color: #ABABAB;
								//background-color: pink;
							}
						}
					}

					.news-list:last-child {
						border-bottom: none;
						margin-bottom: 0;
						padding-bottom: 0;
					}
				}
			}
		}

		.advertisement {
			margin-top: 30rpx;

			image {
				// width: 100%;
				border-radius: $border-radius-lg;
				// margin-bottom: 30rpx;
			}
		}
	}
</style>